7.3 How to input data?

Motivations
How to read user inputs?
- Usually within a form, e.g., <form> ... </form>. Note that the sumission of data to a server will be discussed next time.
- What elements within a form can be used to read data from the user?
  - Try all the examples in HTML Forms.
  - Trial 1: Let's try to read data from the user.
    <???> Enter your name: <input type='text' ???='tr1-input'></input> <br> <input type='button' onclick='???' value='Click to read!'></input> </form> <p id='tr1-msg'>Message here!</p> <???> function tr1_read() { var input_value = document.???('tr1-input').???; // read the value document.getElementById('tr1-msg').??? = 'Your name is ' ??? input_value; } </script>
  - Try all the examples in HTML Form Elements.
  - input
    - Try all the examples in HTML Input Types.
    - type: text, password, hidden, submit, email, ...
    - name
    - value
    - autocomplete
    - autofocus
    - readonly, disabled, size, maxlength, ...
    - Try all the examples in HTML Input Attributes.
    - When do you use 'hidden'?
    - Trial 2: Let's try to read command, username and password.
      <???>  <input type=??? id='tr2-command' value='SignIn'></input> Username: <input type='text' ???='tr2-username' placeholder='Enter username'></input><br> Password:  <input type='???' ???='tr2-password' ???='Enter password'></input><br> <input type='button' onclick='???' value='Click to read!'></input> </form> <p id='tr2-msg'>Message here!</p> <script> function tr2_read() { var command = ???.???('tr2-command').value; // read the command var username = document.???('tr2-username').???; // read the username var password = document.???(???).???; // read the password document.getElementById('tr2-msg').??? = command + ', ' + username + ', ' + password; } </script>
    - Trial 3: Let's try to submit command, username and password to a server-side program. Note that the 'value's are submitted with their 'name's, not 'id's.
      <form method='get' action='//cs.tru.ca/~mlee/comp3540/Software/test_display_inputs.php'>  <input type=??? name='command' value='SignIn'></input> Username: <input type='text' ???='username' placeholder='Enter username'></input><br> Password:  <input type='???' ???='password' ???='Enter password'></input><br>  <input type=??? value='Submit'></input> </form>
  - select and option
  - Trial 4: Let's try to read the selected option.
    <???> Select a car: <??? id='tr4-cars' name="cars"> <option value="hundai">Hyundai</option> <??? ???="saab">Saab</option> <??? ???="honda">Honda</option> <??? ???="audi">Audi</option> </select> <br><br> <input type='button' ???=??? value='Click to read!'></input> </form> <p id='tr4-msg'>Message here!</p> <script> function tr4_read() { var car = ???.???(???).???; // read the selected car value document.getElementById('tr4-msg').??? = car; } </script>
  - textarea
  - radio
    - How to group multiple radio buttons so that only one can be checked? the same name value
  - checkbox
  - button
  - datalist
- Just a question. Do you remember how to select elements using attributes in CSS? If you do not remember, study CSS Attribute Selectors.
- Trial 5: Let's try to write the code to read username, password, and note from the user, when a button is clicked. For each input-like element, you can read 'name' and 'value' values. (Think for what you use .)
  <???> label???tr5 { display:???; width:80px; } /* inline-block to give width */ </style> <label class='tr5' for='tr5-username'>Username: </label> <input id='tr5-username' ???='text' name='???'></input> <br> <label class='tr5' ???='tr5-password'>Password: </label> <input id='tr5-password' type='???' ???='password'></input> <br> <??? class='tr5' ???='tr5-note'>Note: </label> <??? id='tr5-note' ???='note'></textarea>  <br> <??? id='tr5-read' class='tr5' onclick=???>Click to read!</button> <???> function tr5_read() { var msg = ''; msg += document.getElementById('tr5-username').name + ', ' + ???.getElementById('tr5-username').value + "\n"; msg += ???.???('tr5-password').??? + ', ' + ???.???('tr5-password').??? + "\n"; msg += ???.???('tr5-note').??? + ', ' + ???.???('tr5-note').???; ???(msg); // Display the message using an alert window } </script>
How to automatically fill in an input field?
How to hide user typing?

Learning outcomes